<template>
  <a-modal
    :visible="visible"
    :width="'80%'"
    :title="`${current ? '修改报销单' : '新增报销单'}`"
    okText="确认并提交"
    cancelText="取消"
    @cancel="handleCancel"
    @ok="handleCreateReimbursement"
  >
    <a-form
      layout="horizontal"
      :form="form"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-row type="flex" justify="space-around">
        <a-col :span="6">
          <a-form-item label="申请人">
            <a-select
              show-search
              :filter-option="filterOption"
              v-decorator="[
                'payee',
                {
                  rules: [{ required: true, message: 'Please select 申请人' }],
                },
              ]"
              placeholder="请选择申请人"
            >
              <a-select-option v-for="item in userList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报销总额">
            <span class="ant-form-text">
              $
            </span>
            <a-input-number v-model="totalAmount" disabled style="width: 80%;"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="申请时间">
            <a-date-picker
              v-decorator="[
                'declare_date',
                {
                  initialValue: getCurrentDate(),
                  rules: [{ required: true, message: 'Please input 申请时间' }],
                },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="备注">
            <a-input type="textarea" v-decorator="['remark', { initialValue: 'remark' }]" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24" v-if="!current" v-for="(item, index) in reimbursementItemList" :key="item.guid">
        <a-col :span="4">
          <a-form-item label="项目">
            <a-input
              v-decorator="[
                `project_name_${item.guid}`,
                { rules: [{ required: true, message: '名称不能为空' }], initialValue: '' },
              ]"
              @change="
                (e) => {
                  item.project_name = e.target.value;
                }
              "
            />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="不含税金额">
            <a-input
              v-decorator="[
                `no_tax_amount_${item.guid}`,
                { rules: [{ required: true, message: 'Please input' }], initialValue: 0 },
              ]"
              @change="
                (e) => {
                  handleAddAmountChange(e, item, 'no_tax_amount');
                }
              "
            />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="税额">
            <a-input
              v-decorator="[
                `tax_amount_${item.guid}`,
                { rules: [{ required: true, message: 'Please input' }], initialValue: 0 },
              ]"
              @change="
                (e) => {
                  handleAddAmountChange(e, item, 'tax_amount');
                }
              "
            />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="发生时间">
            <a-date-picker
              style="width: 100%"
              v-decorator="[
                `occurrence_date${item.guid}`,
                {
                  initialValue: getCurrentDate(),
                  rules: [{ required: true, message: 'Please input payee' }],
                },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="备注">
            <a-input
              v-decorator="[
                `remark_${item.guid}`,
                // { rules: [{ required: true, message: '名称不能为空' }] },
              ]"
              @change="
                (e) => {
                  item.remark = e.target.value;
                }
              "
            />
          </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-form-item>
            <a-icon v-if="index >= 1" type="minus-circle-o" @click="addRemoveItem(index)" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item v-if="!current" v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 60%" @click="addItem()">
          <a-icon type="plus" /> 新增报销条目
        </a-button>
      </a-form-item>
      <a-row v-if="current">
        <span>报销条目</span>
        <a-table
          :pagination="false"
          :columns="modalColumns"
          :data-source="reimbursementItemList"
          rowKey="id"
        >
          <template
            v-for="col in ['project_name', 'no_tax_amount', 'tax_amount']"
            :slot="col"
            slot-scope="text, record"
          >
            <template v-if="record.editable">
              <a-input
                :key="col"
                style="margin: -5px 0"
                :value="text"
                @change="(e) => handleChange(e.target.value, record.id, col)"
              />
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a @click="() => saveItem(record.id)">保存</a>
                <a-popconfirm title="Sure to cancel?" @confirm="() => cancelEdit(record.id)">
                  <a>取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a-button
                  type="primary"
                  :disabled="editingKey !== ''"
                  @click="() => editItem(record.id)"
                >编辑</a-button
                >
                <a-button
                  type="danger"
                  :disabled="editingKey !== ''"
                  @click="() => removeItem(record.id)"
                >删除</a-button
                >
              </span>
            </div>
          </template>
        </a-table>
      </a-row>
    </a-form>
  </a-modal>
</template>

  <script>
  import { getFormatDate } from '@/utils/util'
  export default {
    name: 'AddModal',
    props: {
      visible: Boolean,
      current: Object,
      menuOptionList: Array
    },
    data () {
      return {
        form: this.$form.createForm(this)
      }
    },
    watch: {
      current (val) {
        if (val) {
          console.log('valvalval', val)
          this.$nextTick(() => {
            this.form.setFieldsValue({
            })
          })
        }
      }
    },
    methods: {
      getCurrentDate () {
        return getFormatDate(new Date(), 'YYYY-MM-DD')
      },
      handleOk () {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (this.current) {
              values.id = this.current.id // 如果是编辑，需要传id
            }
            this.$emit('ok', values)
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.$emit('cancel')
      }
    }
  }
  </script>
